<template>
    <h3>模态框</h3>
    <div class="c-p-v-m">
        <a-button @click="popShown = true">按钮</a-button>
        <a-modal v-model:value="popShown">
            <div
                class="c-p-m c-round-m"
                style="background-color: #fff; box-shadow: 1px 1px 10px #ccc"
            >
                <div class="c-p-v-m">
                    <a-control-group>
                        <a-label>账号</a-label>
                        <a-input-string v-model:value="name"></a-input-string>
                    </a-control-group>
                </div>
                <div class="c-p-v-m">
                    <a-control-group>
                        <a-label>最喜爱的水果</a-label>
                        <a-input-select v-model:value="fav" :items="favItems" />
                    </a-control-group>
                </div>
                <div class="c-p-v-m">
                    <a-control-group>
                        <a-label color="primary">品类</a-label>
                        <a-input-tree
                            color="primary"
                            :canSelectFolder="true"
                            :items="cateItems.filter((a) => a.parentId == null)"
                            :getItemsFunc="
                                (a) =>
                                    cateItems.filter((b) => b.parentId == a.id)
                            "
                            :getIsFolderFunc="
                                (a) => cateItems.some((b) => b.parentId == a.id)
                            "
                            v-model:value="cate"
                            :getTextFunc="(a) => a.name"
                            :getValueFunc="(a) => a.id"
                            :getDisplayTextFunc="(a) => a.name"
                            popPlacement="top"
                        >
                        </a-input-tree>
                    </a-control-group>
                </div>
                <div class="c-p-v-m">
                    <a-control-group>
                        <a-badge :count="badgeCount" :dotOnly="dotOnly">
                            <a-button>按钮</a-button>
                        </a-badge>
                        <a-input-number
                            v-model:value="badgeCount"
                        ></a-input-number>
                        <a-input-check-box-single v-model:value="dotOnly">
                            <template v-slot:append>
                                <span>仅仅展示小红点</span>
                            </template>
                        </a-input-check-box-single>
                    </a-control-group>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
export default {
    data() {
        return {
            colors: [
                'default',
                'primary',
                'secondary',
                'success',
                'warning',
                'error',
            ],
            sizes: ['xs', 's', 'm', 'l', 'xl'],
            name: 'zhang',
            age: 1,
            password: '',
            checked: false,
            fav: null,
            favs: [],
            favItems: [
                { text: '香蕉', value: 1 },
                { text: '苹果', value: 2 },
                { text: '梨子', value: 3 },
                { text: '葡萄', value: 4, disabled: true },
            ],
            popupAlignments: ['top-left', 'top-middle', 'top-right', 'middle-left', 'middle-middle', 'middle-right', 'bottom-left', 'bottom-middle', 'bottom-right'],
            cateItems: [
                { id: 1, parentId: null, name: '面包蛋糕' },
                { id: 2, parentId: null, name: '麻辣食品', disabled: true },
                { id: 3, parentId: null, name: '膨化食品' },

                { id: 4, parentId: 1, name: '面包' },
                { id: 5, parentId: 1, name: '蛋糕' },
                { id: 6, parentId: 1, name: '三明' },

                { id: 7, parentId: 2, name: '豆干' },
                { id: 8, parentId: 2, name: '辣条' },
                { id: 9, parentId: 2, name: '凤爪' },

                { id: 10, parentId: 4, name: '面包商品1' },
                { id: 11, parentId: 4, name: '面包商品2' },
                { id: 12, parentId: 4, name: '面包商品3', disabled: true },
            ],
            cate: null,
            cates: [],
            badgeCount: 1,
            dotOnly: true,
            startTime: new Date(),
            popShown: false
        }
    },
    methods: {
        testClick(a) {
            console.log(a.name)
        },
        getParents(item) {
            let parents = []
            let parent = this.cateItems.find(a => a.id == item.parentId)
            if (parent) {
                parents.unshift(parent)
                let parentParents = this.getParents(parent)
                parents.unshift(...parentParents)
            }
            return parents
        }
    }
}
</script>